import {
    pinyin
} from '../lib/Convert_Pinyin-module.js'

import * as $util from '../lib/hc-util.js'

const hc$rule$creation$dialog = {
    data: function() {
        return {
            formdata: {
                name: '',
                code: '',
            },
            type: "",
            visible: false,
            firstUpperCase:true,
        }
    },
    computed: {
        typeName: {
            get: function() {
                let name = $config.componentMap[this.type].rname;
                return name ? name : ''
            }
        },
        codeTips: {
            get: function() {
                let code = this.$data.formdata.name
                if (code) {
                    // code = window.pinyin ? pinyin.getFullChars(code).split(' ').join('') : code;

                    let fc = code[0];
                    if (fc >= '0' && fc <= '9') {
                        DigitalIndex = ['Zero', 'One', 'Two', 'Three', 'Four', 'Five', 'Six', 'Seven', 'Eight',
                            'Nine'
                        ];
                        code = DigitalIndex[parseInt(fc)] + code.slice(1);
                    }
                    
                    code = $util.tokentrim(pinyin.getFullChars(code));
                    
                    if (fc >= 'a' && fc <= 'z' && this.firstUpperCase)
                        code = fc.toUpperCase() + code.slice(1);

                    return code;

                } else return '唯一标识且不能修改'

            }
        }
    },
    methods: {
        submit: function(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    this.visible = false;
                    let code = this.formdata.code;
                    code = code ? code : this.codeTips;
                    code = code ? code : this.formdata.name;
                    if(!code)
                    {   
                        this.$message({type:'warning',message:'组件代码未提供 或 不合法。'});
                        return false;
                    };
                    this.confirmed({
                        name: this.formdata.name,
                        code: code
                    })
                } else {
                    return false;
                }
            });
        },
        selectName: function() {
            this.$nextTick(function() {
                this.$refs['refname'].focus();
                this.$refs['refname'].select();
            })
        },
        reset: function(formName) {
            this.$refs[formName].resetFields();
        },
        confirmed: function(val) {
            console.warn('The confirmed callback function is not provoided in Rule Creation Dialog')
        }
    },
    template: `	
<el-dialog :title="'新建'+typeName+'决策组件'" :visible.sync="visible">
				<el-form :model='formdata' ref='formref' label-position='left' label-width='auto'>
					<el-form-item label="组件名称" prop='name' :rules="[{
									required: true,
									message: '请输入组件名称',
									trigger: 'blur'
								},
								{
									min: 3,
									max: 30,
									message: '长度在 3 到 30 个字符',
									trigger: 'blur'
								}
							]">
						<el-input ref='refname' v-model.trim='formdata.name' placeholder="项目内唯一名称"></el-input>
					</el-form-item>
					<el-collapse value='hiddenAdvanced'>
						<el-collapse-item name='advanced'>
							<template v-slot:title><span style="color: #C0C4CC;">更多设置</span></template>
							<el-form-item label="组件代码" prop='code' :rules="[
									{
										min: 3,
										max: 30,
										message: '长度在 3 到 30 个字符',
										trigger: 'change'
									}
								]">
								<el-input v-model.trim='formdata.code' ref='rulecoderef' :placeholder="codeTips"></el-input>
							</el-form-item>
							<el-form-item label="注意事项">
								<ol style="font-size: 12px; line-height: 1.5;box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1)">
									<li>组件代码必须是标识符,即：</li>
									<li>中英文字符开头，字符和数字构成，不包括空白及特殊字符，如~！@#￥$%……&*（）《》？：“，。、；‘·等</li>
									<li>建议首字符大写</li>
								</ol>
							</el-form-item>
						</el-collapse-item>
					</el-collapse>

					<el-form-item label="">
						<el-button type="primary" @click="submit('formref')">确认</el-button>
						<el-button @click="reset('formref')">重置</el-button>
						<el-button @click='visible = false'>取消</el-button>
					</el-form-item>

				</el-form>
			</el-dialog>
			
			`
};

export default function HcRuleCreationDialog(cfg) {
    let Rule$Creation$Dialog = Vue.extend(hc$rule$creation$dialog)

    let vm = new Rule$Creation$Dialog(cfg);

    // $util.shadowCopyIfExist(vm, cfg)
    Object.assign(vm, cfg);

    if (cfg.el == undefined) {
        vm.$mount();
        document.body.appendChild(vm.$el)
    }

    this.vm = vm;

    return {
        then: function(callback) {
            vm.confirmed = callback
            return this
        },
        show: function(cfg) {
            // $util.copyPropsR2LifExist(vm, cfg)
            Object.assign(vm, cfg);

            vm.visible = true;
            return this
        },
        vm: vm
    }
};
